{% extends "base.html" %}
{% block title %}
    <title>样本DNA库存信息</title>
{% endblock %}


{% block content %}
    <div class="jumbotron">
        <h1>甲基化早筛项目数据库管理系统Demo</h1>
        <h4>样本DNA库存信息表</h4>
    </div>
{% endblock %}

{% block plot %}
    <div class="row">
        <div id="plot_highcharts" style="width: 550px; height: 400px; margin: 0 auto" class="col-9"></div>
        <div id="plot_button" class="form-group col-3">
            <label for="plot_highcharts_field"> 请选择用于画图的关键字段</label>
            <select class="form-control" id="plot_highcharts_field" name="plot_highcharts_field">
                <option value="totalM" selected="selected">DNA提取总量</option>
                <option value="successM">成功建库使用量</option>
                <option value="failM">失败建库使用量</option>
                <option value="researchM">科研项目使用量</option>
                <option value="othersM">其他使用量</option>
            </select>
        </div>
    </div><br>
{% endblock %}

{% block table %}
    <!-- datatables -->
    <table id="table_id" class="display">
        <thead>
        <tr>
            <th>索引</th>
            <th>样本编号</th>
            <th>DNA提取编号</th>
            <th>DNA提取总量(ng)</th>
            <th>成功建库使用量(ng)</th>
            <th>失败建库使用量(ng)</th>
            <th>科研项目使用量(ng)</th>
            <th>其他使用量(ng)</th>
            <th>剩余量(ng)</th>
            <th>上次修改时间</th>
            <th>创建时间</th>
        </tr>
        </thead>
    </table>
{% endblock %}


{% block extra_js %}
    <script>
        $(document).ready(function () {
            let fieldForPie = $('#plot_highcharts_field');

            let table = $('#table_id').DataTable({
                "language": {
                    "lengthMenu": "选择每页 _MENU_ 展示 ",
                    "zeroRecords": "未找到匹配结果--抱歉",
                    "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
                    "infoEmpty": "没有数据",
                    "search": "搜索",
                    "infoFiltered": "(获取 _MAX_ 项结果)",
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "末页"
                    }
                },
                "scrollY": "5000px",
                "scrollCollapse": true,
                "pagingType": "full_numbers",
                rowReorder: true,
                colReorder: true,
                searching: true,
                select: true,
                dom: 'lB<"clear">frtip',
                buttons: [
                    {
                        extend: 'colvisGroup',
                        text: '显示前5列',
                        show: [0, 1, 2, 3, 4, 5],
                        hide: [6, 7, 8, 9, 10]
                    },
                    {
                        extend: 'colvisGroup',
                        text: '显示全部列',
                        show: ':hidden',
                    },
                    {
                        text: '指定显示列', extend: 'colvis',
                        postfixButtons: ['colvisRestore'],
                        columnText: function (dt, idx, title) {
                            return (idx + 1) + ': ' + title;
                        }
                    },
                    {
                        extend: 'selectAll',
                        text: '全选'
                    }, {
                        extend: 'selectRows',
                        text: '选择多行'
                    }, {
                        extend: 'selectNone',
                        text: '取消当前选择'
                    },
                    {
                        extend: 'copy',
                        text: '复制到剪切板'
                    }, {
                        extend: 'csv',
                        text: '输出到csv'
                    }
                ],
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
                "serverSide": true,
                "processing": true,
                "ajax": "/api/DNAInventoryInfo/?format=datatables",
                "deferRender": true,
                "columns": [
                    {
                        data: 'index',
                        width: "1%",
                        // 若想前端显示的不一样，则需要"render"函数
                        'render': function (data, type, full, meta) {
                            return meta.row + 1 + meta.settings._iDisplayStart;
                        }
                    },
                    {"data": "sample_id", "name": "sample_id__sample_id"},
                    {"data": "dna_id", "name": "dna_id__dna_id"},
                    {"data": "totalM"},
                    {"data": "successM"},
                    {"data": "failM"},
                    {"data": "researchM"},
                    {"data": "othersM"},
                    {
                        "data": null,
                        render: function (data, type, row, meta) {
                            return changeThreeDecimal_f(row.totalM - row.successM - row.failM - row.researchM
                                - row.othersM)
                        }
                    },
                    {"data": "last_modify_date"},
                    {"data": "created"}
                ]
            });
            table.button(0).trigger();

            pie_plot('DNAInventoryInfo', fieldForPie.val(), fieldForPie.find("option:selected").text());

            fieldForPie.change(function () {
                pie_plot('DNAInventoryInfo', fieldForPie.val(), fieldForPie.find("option:selected").text());
            });

        })

    </script>
{% endblock %}